<template>
  <el-drawer
    :wrapper-closable="false"
    :title="id ? '编辑' : '新增'"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] pb-[68px] pl-[16px] pr-[4px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <div class="common-secondary-bg">
          <div class="common-secondary-title"></div>
          参数基本信息
        </div>
        <el-form
          ref="form"
          class="h-full overflow-y-auto"
          :rules="formRules"
          :model="formData"
          label-suffix="："
          size="small"
          status-icon
          label-position="right"
          label-width="80px"
        >
          <el-form-item :prop="PROPS.name" :label="LABELS.name">
            <el-input v-model.trim="formData[PROPS.name]" class="w-full" clearable />
          </el-form-item>

          <el-form-item :prop="PROPS.key" :label="LABELS.key">
            <el-input v-model.trim="formData[PROPS.key]" class="w-full" clearable />
          </el-form-item>

          <el-form-item :prop="PROPS.value" :label="LABELS.value">
            <el-input v-model.trim="formData[PROPS.value]" class="w-full" clearable />
          </el-form-item>

          <el-form-item :prop="PROPS.comments" :label="LABELS.comments">
            <el-input v-model="formData[PROPS.comments]" type="textarea" class="w-full" clearable />
          </el-form-item>
        </el-form>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import { systemParamAdd, systemParamDetail, systemParamUpdate } from "@/api/parameter";

export default {
  name: "DetailDrawer",
  components: {},
  mixins: [vModelMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      ...config,
      formRules: {},
      formData: {
        [config.PROPS.name]: "",
        [config.PROPS.key]: "",
        [config.PROPS.value]: "",
        [config.PROPS.comments]: "",
      },
    };
  },
  computed: {},
  methods: {
    addRules(arr) {
      arr.forEach((item) => {
        this.$set(this.formRules, item, [{ required: true, message: "请输入", trigger: "change" }]);
      });
    },
    onDrawerOpen() {
      if (this.id) {
        systemParamDetail({ id: this.id }).then((value) => {
          this.formData = value;
        });
      }
      this.addRules([this.PROPS.key, this.PROPS.name, this.PROPS.value]);
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = this.formData;
          if (this.id) {
            systemParamUpdate(data).then((value) => {
              this.$message.success("修改成功");
              this.innerValue = false;
              this.$emit("on-submit-success");
            });
          } else {
            systemParamAdd(data).then((value) => {
              this.$message.success("添加成功");
              this.innerValue = false;
              this.$emit("on-submit-success");
            });
          }
          this.$emit("onSubmit", this.formData);
        } else {
          return false;
        }
      });
    },
    onDrawerClosed() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>
